<template>
  <view class="content">
    <view class="top_kong"></view>
    <view class="top_box"
          @click="goback">
      <image src="../../static/image/dtk_ico_gb@2x.png"
             @click="goBack"></image>
      <view class="top_box_right"
            @click="goZhuc">注册</view>
    </view>
    <view class="login_box">
      <view class="login_title">账号密码登录</view>
      <view class="login_input_box">
        <view class="login_input_item">
          <input type="number"
                 value=""
                 placeholder="请输入手机号"
                 placeholder-class="input_class"
                 v-model="mobile" />
          <image class="clear_btn"
                 src="../../static/image/ico_gb@2x.png"
                 mode=""
                 @click="clearmob"
                 v-show="showclear"></image>
        </view>
        <view class="login_input_item">
          <input type="text"
                 value=""
                 :password="flag"
                 placeholder="请输入6~16位密码"
                 placeholder-class="input_class"
                 v-model="password"
                 v-show="!seeStatus" />
          <view class="input_box_r">
            <image class="clear_btn"
                   src="../../static/image/ico_gb@2x.png"
                   v-show="showclear1"
                   @click="clearpwd"
                   mode=""></image>
            <image class="see_btn"
                   @click="togglepwd(0)"
                   src="../../static/image/ico_zy@2x.png"
                   mode=""
                   v-show="closeStatus&&password.length>0"></image>
            <image class="see_btn1"
                   @click="togglepwd(1)"
                   v-show="!closeStatus&&password.length>0"
                   src="../../static/image/ico_zy@2x(1).png"
                   mode=""></image>
          </view>
        </view>
      </view>
      <view class="login_btn1"
            v-if="password!=''&&mobile!=''"
            @click="goLogin">登录</view>
      <view class="login_btn"
            v-else>登录</view>
      <view class="login_other_box">
        <view class="login_other_l">
          <image src="../../static/image/ico_dl_jzzh_nor@2x.png"
                 mode=""
                 @click="rememberUsername"
                 v-show="!remember"></image>
          <image src="../../static/image/ico_dl_jzzh@2x.png"
                 mode=""
                 @click="rememberUsername"
                 v-show="remember"></image>
          <view>记住账号</view>
        </view>
        <view class="login_other_r"
              @click="goforget">忘记密码？</view>
      </view>
    </view>
    <view class="btm_box">

      <view class='textbox'>
        登录即代表您已同意<text class="xy_color"
              @click="goYhxy">《用户协议》</text>与<text class="xy_color"
              @click="goYszc">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      choosestatus: false,
      mobile: '',
      password: '',
      showclear: false, //清空密码框
      showclear1: false,
      seeStatus: false, //隐藏密码
      remember: false, //记住密码
      closeStatus: false, //显示密码
      flag: true //控制密码是否可见
    }
  },
  onLoad() {
    this.mobile = uni.getStorageSync('mobile')
    this.password = uni.getStorageSync('password')
    if (this.mobile && this.password) this.remember = true
  },

  methods: {
    rememberUsername() {
      this.remember = !this.remember
    },
    clearmob() {
      this.mobile = ''
    },
    clearpwd() {
      this.password = ''
    },
    async goLogin() {
      let { data } = await this.$http.post('/user/login', { account: this.mobile, password: this.password })
      console.log(data)
      if (data.code == 1) {
        uni.setStorageSync('token', data.data.userinfo.token)
        uni.setStorageSync('userinfo', data.data.userinfo)
      }
      uni.showToast({ title: data.msg, icon: 'none' })
      if (this.remember && data.code == 1) {
        uni.setStorageSync('mobile', this.mobile)
        uni.setStorageSync('password', this.password)
        setTimeout(() => {
          uni.switchTab({
            url: '../../pages/my/my'
          })
        }, 1500)
      } else {
        uni.removeStorageSync('mobile')
        uni.removeStorageSync('password')
      }
    },
    togglepwd(val) {
      // uni.showToast({ title: val, icon: 'none' })
      this.closeStatus = !this.closeStatus
      if (this.closeStatus) return (this.flag = false)
      this.flag = true
    },
    goback() {
      uni.navigateBack({
        delta: 1
      })
    }
  },

  watch: {
    mobile(val) {
      if (val.length > 0) {
        this.showclear = true
      } else {
        this.showclear = false
      }
    },
    password(val) {
      if (val.length > 0) {
        this.showclear1 = true
      } else {
        this.showclear1 = false
        this.seeStatus = false
      }
    }
  }
}
</script>

<style>
.content {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  overflow: hidden;
}
.top_kong {
  width: 100%;
  height: var(--status-bar-height);
}
.top_box {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.top_box image {
  width: 36rpx;
  height: 36rpx;
}
.top_box_right {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.login_box {
  width: 100%;
  margin-top: 10%;
  height: 550rpx;
}
.login_title {
  width: 80%;
  margin: auto;
  font-size: 44rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.login_input_box {
  width: 80%;
  height: 200rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
.login_input_item {
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #e5e5e5;
  justify-content: space-between;
}
.input_class {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
input {
  width: 80%;
}
.login_btn {
  width: 80%;
  height: 88rpx;
  margin: auto;
  background: #dddddd;
  border-radius: 10rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}
.login_btn1 {
  width: 80%;
  height: 88rpx;
  margin: auto;
  background: linear-gradient(90deg, #ffdd47, #fcb630);
  border-radius: 10rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}
.login_other_box {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
}
.login_other_l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.login_other_l image {
  width: 26rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.login_other_r {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.btm_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  position: absolute;
  bottom: 40rpx;
}
.chooseimg {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.textbox {
  height: 36rpx;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xy_color {
  font-size: 22rpx;
  color: #333333;
}
.clear_btn {
  width: 26rpx;
  height: 26rpx;
}
.see_btn {
  width: 26rpx;
  height: 18rpx;
  margin-left: 20rpx;
}
.see_btn1 {
  width: 26rpx;
  height: 16rpx;
  margin-left: 20rpx;
}
</style>
